@import '../style/var';

// 2: Reboot
@import '../style/bootstrap/index';

/*----------------------------------------*/
/*  Card Element Styles
/*----------------------------------------*/

//
// Card
//
.em-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: $card-height;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
  @include border-radius($card-border-radius);

  // Due to specificity of the above selector (`.card > .list-group`), we must
  // use a child selector here to prevent double borders.

  > hr {
    margin-right: 0;
    margin-left: 0;
  }

  > .list-group {
    border-top: inherit;
    border-bottom: inherit;
    &:first-child {
      border-top-width: 0;
      @include border-top-radius($card-inner-border-radius);
    }

    &:last-child {
      border-bottom-width: 0;
      @include border-bottom-radius($card-inner-border-radius);
    }
  }

  &--clickable {
    cursor: pointer;
    &:active {
      background-color: $--cell-active-color;
    }
  }

  > &__header + .list-group,
  > .list-group + &__footer {
    border-top: 0;
  }

  // Header
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    //height: $card-header-height;
    min-height: $card-header-height;
    background-color: $card-cap-bg;
    background-color: transparent;
    padding: $card-spacer-y $card-spacer-x;
    margin-bottom: 0;
    color: $card-cap-color;

    &:not(.no-border) {
      border-bottom: $card-border-width solid $card-border-color;
    }

    &:first-child {
      @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
    }

    // Line tabs integration
    &-tabs {
      margin-right: -$card-spacer-x / 2;
      margin-bottom: -$card-spacer-y;
      margin-left: -$card-spacer-x / 2;
      border-bottom: 0;
      &-line {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
      }
    }

    &-tabs-line {
      .card-toolbar {
        margin: 0;
      }

      .nav {
        border-bottom-color: transparent;

        .nav-item {
          align-items: stretch;
        }

        .nav-link {
          padding-top: $card-spacer-y;
          padding-bottom: $card-spacer-y;
        }
      }
    }
    &-right {
      justify-content: flex-end;
    }

    &-pills {
      margin-right: -$card-spacer-x / 2;
      margin-left: -$card-spacer-x / 2;
    }
  }

  //
  // Base styles
  //

  &__text:last-child {
    margin-bottom: 0;
  }

  &__link {
    @include hover() {
      text-decoration: none;
    }

    + .card-link {
      margin-left: $card-spacer-x;
    }
  }

  //
  // Optional textual caps
  //

  //
  // Header navs
  //

  // Card image
  &__img {
    &-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: $card-img-overlay-padding;
      @include border-radius($card-inner-border-radius);
    }
    &,
    &-top,
    &-bottom {
      flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
      width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
    }

    &,
    &-top {
      @include border-top-radius($card-inner-border-radius);
    }

    &,
    &-bottom {
      @include border-bottom-radius($card-inner-border-radius);
    }
  }

  &__header &__toolbar {
    [data-card-tool='toggle'] {
      i {
        transition: $transition;
      }
    }
  }

  // Title
  &__title {
    display: flex;
    align-items: center;
    flex: 1;
    //flex-wrap: wrap;
    // Description
    small {
      color: $text-muted;
      font-size: 1rem;
    }
  }

  &__subtitle {
    margin: 0 0 0 $card-spacer-y / 2;
    display: flex;
    flex: 1;
  }

  &__tag {
    display: inline-flex;
    > .em-image {
      height: 1.4rem;
      max-height: 1.5rem;
    }
  }

  &__link {
    + &__link {
      margin-left: $card-spacer-x;
    }
  }

  &__label {
    font-weight: 500;
    font-size: 1.275rem;
    color: $dark;
    display: flex;
    align-items: center;
    flex: 1;
  }

  &__icon {
    margin-right: 0.75rem;
    line-height: 0;

    i {
      font-size: 1.25rem;
      color: $dark-50;
      line-height: 0;

      &:after,
      &:before {
        line-height: 0;
      }
    }
  }
  // Toolbar
  &__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &__header > &__toolbar {
    [data-card-tool='toggle'] {
      i {
        transition: $transition;
      }
    }
  }
  &__link {
    + &__link {
      margin-left: $card-spacer-x;
    }
  }

  // Body
  &__body {
    padding: $card-spacer-y $card-spacer-x;
    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
    // as much space as possible, ensuring footers are aligned to the bottom.
    flex: 1 1 auto;
    // Workaround for the image size bug in IE
    // See: https://github.com/twbs/bootstrap/pull/28855
    min-height: 1px;
    color: $card-color;
  }

  // Footer
  &__footer {
    background-color: transparent;
    background-color: $card-cap-bg;
    padding: $card-spacer-y $card-spacer-x;
    color: $card-cap-color;
    border-top: $card-border-width solid $card-border-color;

    &:last-child {
      @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
    }
  }

  // Make full height
  &--stretch {
    align-items: stretch !important;
    height: 100%;

    &.gutter-b {
      height: calc(100% - #{$grid-gutter-width});
    }

    &-half {
      height: 50%;

      &.gutter-b {
        height: calc(50% - #{$grid-gutter-width});
      }
    }

    &-third {
      height: 33.33%;

      &.gutter-b {
        height: calc(33.33% - #{$grid-gutter-width});
      }
    }

    &-fourth {
      height: 25%;

      &.gutter-b {
        height: calc(25% - #{$grid-gutter-width});
      }
    }
  }

  &--square {
    display: flex;
    align-items: stretch !important;
    flex-direction: column;
    width: 100%;
    position: relative;
    &::after {
      display: block;
      padding-top: 100%;
      content: '';
    }
    & > :first-child {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      & > * {
        width: 100%;
        height: 100%;
      }
    }
  }

  // Card header fit style
  &--fit > &__header {
    border-bottom: 0;
  }

  &--fit > &__footer {
    border-top: 0;
  }

  // Card space style
  &--space {
    padding-left: $card-spacer-x;
    padding-right: $card-spacer-x;
  }

  // Transparent Background
  &--transparent {
    background-color: transparent;
  }

  // No Shadow
  &--shadowless {
    box-shadow: none;
  }

  // Border style
  &--border {
    box-shadow: none;
    border: $card-border-width solid $card-border-color;
  }

  // Scroll
  &--scroll {
    position: relative;
    overflow: auto;
  }

  // Collapsed Mode
  &--collapsed {
    > form,
    > .card-body {
      display: none;
    }
  }

  &__collapsed,
  &__collapse {
    .card-header {
      .card-toolbar {
        [data-card-tool='toggle'] {
          i {
            transition: $transition;
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  // Utilities
  &--spacer {
    padding: $card-spacer-y $card-spacer-x !important;
  }

  &-x {
    padding-left: $card-spacer-x !important;
    padding-right: $card-spacer-x !important;
  }

  &-y {
    padding-top: $card-spacer-y !important;
    padding-bottom: $card-spacer-y !important;
  }

  &--rounded {
    border-radius: $card-border-radius;
    &-top {
      border-top-left-radius: $card-border-radius;
      border-top-right-radius: $card-border-radius;
    }

    &-bottom {
      border-bottom-left-radius: $card-border-radius;
      border-bottom-right-radius: $card-border-radius;
    }
  }

  &--roundless {
    border-radius: 0 !important;
  }

  // Card deck

  &-deck {
    .card {
      margin-bottom: $card-deck-margin;
    }

    @include media-breakpoint-up(sm) {
      display: flex;
      flex-flow: row wrap;
      margin-right: -$card-deck-margin;
      margin-left: -$card-deck-margin;

      .card {
        // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
        flex: 1 0 0%;
        margin-right: $card-deck-margin;
        margin-bottom: 0; // Override the default
        margin-left: $card-deck-margin;
      }
    }
  }

  //
  // Card groups
  //

  &-group {
    // The child selector allows nested `.card` within `.card-group`
    // to display properly.
    > .card {
      margin-bottom: $card-group-margin;
    }

    @include media-breakpoint-up(sm) {
      display: flex;
      flex-flow: row wrap;
      // The child selector allows nested `.card` within `.card-group`
      // to display properly.
      > .card {
        // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
        flex: 1 0 0%;
        margin-bottom: 0;

        + .card {
          margin-left: 0;
          border-left: 0;
        }

        // Handle rounded corners
        @if $enable-rounded {
          &:not(:last-child) {
            @include border-right-radius(0);

            .card-img-top,
            .card-header {
              // stylelint-disable-next-line property-blacklist
              border-top-right-radius: 0;
            }
            .card-img-bottom,
            .card-footer {
              // stylelint-disable-next-line property-blacklist
              border-bottom-right-radius: 0;
            }
          }

          &:not(:first-child) {
            @include border-left-radius(0);

            .card-img-top,
            .card-header {
              // stylelint-disable-next-line property-blacklist
              border-top-left-radius: 0;
            }
            .card-img-bottom,
            .card-footer {
              // stylelint-disable-next-line property-blacklist
              border-bottom-left-radius: 0;
            }
          }
        }
      }
    }
  }

  //
  // Columns
  //

  &-columns {
    .card {
      margin-bottom: $card-columns-margin;
    }

    @include media-breakpoint-up(sm) {
      column-count: $card-columns-count;
      column-gap: $card-columns-gap;
      orphans: 1;
      widows: 1;

      .card {
        display: inline-block; // Don't let them vertically span multiple columns
        width: 100%; // Don't let their width change
      }
    }
  }
}

// Mobile mode
@include media-breakpoint-down(sm) {
  .em-card {
    // Header
    > &__header:not(.flex-nowrap) {
      min-height: 0;
      padding-top: $card-header-spacer-y;
      padding-bottom: $card-header-spacer-y;
    }
  }
}

// Card related helper classes
.rounded {
  &-card {
    @include border-radius($card-border-radius);
  }
  &-card-top {
    @include border-top-left-radius($card-border-radius);
    @include border-top-right-radius($card-border-radius);
  }
  &-card-bottom {
    @include border-bottom-left-radius($card-border-radius);
    @include border-bottom-right-radius($card-border-radius);
  }
}
